<template>
    <div class="shopList">
        <div class="shopList_top">
		    <div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">商品列表<i class="el-icon-close"></i></div>
		</div>

        <div class="shopList_bottom">
            <div class="new">
                <div class="shopList">
                    <div class="shopList_serch">
                        <div class="shopClass">
                            <span>商品分类</span>
                            <div class="block">
                                <el-cascader
                                :props="cate"
                                :options="cateList"
                                @change="handleChange"></el-cascader>
                            </div>
                        </div>
                        <div class="shopList_serch_ipt">
							<el-input v-model="input" placeholder="请输入商品信息查询"></el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
                    </div>
                </div>
            </div>

            <!-- 表格 -->
            <div class="shopList_table" >
                <div class="shopList_bottom_table">
                <table>
                    <tr>
                        <th></th>
                        <th>序号</th>
                        <th>商品名</th>
                        <th>商家</th>
                        <th>分类</th>
                        <th>销售价格</th>
                        <th>成本价格</th>
                        <th>原价格</th>
                        <th>销量</th>
                        <th>库存</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(v,i) in tableList" :key="i">
                        <td>
                            <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                        </td>
                        <td>{{v.product_id}}</td>
                        <td>{{v.product_title}}</td>
                        <td>{{v.store_id}}</td>
                        <td>{{v.cate_name}}</td>
                        <td>{{v.price}}</td>
                        <td>{{v.cost_price}}</td>
                        <td>{{v.primary_price}}</td>
                        <td>{{v.all_volume}}</td>
                        <td>{{v.all_num}}</td>
                        <td>
                            <button class="editor" @click="toDetail(v.product_id)">详情</button>
                        </td>
                    </tr>
                    <tr v-if="tableList.length == 0"><td class="table_title" colspan="15">当前数据空空如也</td></tr>
                </table>
            </div>
        </div>

        <!-- 全选与分页 -->
        <div class="shopList_bottom_page">
            <div class="shopList_bottom_page_left">
                <div class="shopList_bottom_page_left_checkAll" @click="handerCheckAll">
                    <font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
                </div>全选
                <button class="shopList_bottom_page_left_btn" @click="selectDel">删除</button>
            </div>
            <div class="shopList_bottom_page_right">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background>
                </el-pagination>
            </div>
        </div>

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            input:'',       //搜索框内容
            tableList:[{}],
            checkAll:false,
            page:1,
            pageSize:10,
            total:0,
                  checkBoxAll:[],				// 选中的数据
            shelvesAlls:[],
                  cateList:[],
                  value:'',
            cate:{
              value: 'cate_id',
              label: 'cate_name',
              children: 'child',
              expandTrigger: 'hover'
            },
            sid:'',
            // product_id:''
        }
    },
    mounted() {
        this.sid = localStorage.getItem('sid')
        this.getShopList()
        this.getCateList()
    },
    methods:{
        // 获取商品列表
        getShopList(){
            // this.$http.post('/api/root/ProductShop/lst',{page:this.page,pagesize:this.pageSize,keyword,cate_id})
            let params={
              keyword:'',
              page:this.page,
              pagesize:this.pageSize,
              user_id:this.sid
            }
            this.$api.builderProduct(params)
            .then(res=>{
                console.log('商品数据',res);
                if(res.code==1){
                    this.tableList = res.data.data;
                    this.total = res.data.count;
                }
            })
        },

        //获取分类
        getCateList(){
            this.$http.post('/api/admin/shop/Cate/cateLst',{}).then(res => {
                        // console.log('shangpinku',res);
                        if(res.code == 1) {
                            this.cateList = res.data;
                }
              });
        },

        // 筛选
		handleChange(e){
			console.log(e);
			this.value = e[e.length - 1];
            this.getShopList(this.input,this.value)
		},

        //点击搜索
        handerSeach(){
            this.getShopList(this.input)
        },

        //点击详情
        toDetail(id){
            // this.product_id = this.tableList.product_id
            this.$router.push({name:'builderDetail',query:{id}})
        }, 

         // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index > -1){
						arr.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				this.shelvesAlls.push(this.tableList[i].product_id);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
				}else {
					this.checkBoxAll = [];
				}
				// 去重
				let res = this.checkBoxAll;
				for(let i=0;i<res.length;i++){
					for(let j=i+1;j<res.length;j++) {
						if(res[i] == res[j]) {
							res.splice(j,1);
							j--;
						}
					}
				};
                this.checkBoxAll.map(v => {
					return this.shelvesAlls.push(this.tableList[v].store_id.toString());;
				})
			},

        // 全选删除
        selectDel(){},

        //分页
        	handleSizeChange(val) {
				this.pageSize = val;
				this.getShopList()
			},
			handleCurrentChange(val) {
			    this.page = val;
				this.getShopList()
			},

    }
}
</script>

<style lang="less" scoped>
@import 'builderList.less';
</style>

